<ion-header class="hc-header light">
    <div style="padding-top:5px;padding-bottom:5px;width:80%;margin: 0 auto;max-width: 23rem;">
        <ion-segment [(ngModel)]="message">
            <ion-segment-button value="user">
            {{ 'Messages.User' | translate }}
            </ion-segment-button>
            <ion-segment-button value="system">
            {{ 'Messages.System' | translate }}
            </ion-segment-button>
        </ion-segment>
    </div>
</ion-header>
<ion-content>
    <div [ngSwitch]="message">
        <ion-list *ngSwitchCase="'system'">
            <div class="system-content">
                <div class="system-content-cell" *ngFor="let item of list.system">
                    <div class="cell">
                        <div class="cell-icon"><i class="iconfont icon-notice_sys"></i> </div>
                        <div class="cell-content">
                            <p>{{item.content}}</p>
                        </div>
                    </div>
                    
                    <div class="times">{{_getDate(item.addtime)}} <font class="noread">Read</font></div>
                </div>
                <ion-infinite-scroll (ionInfinite)="doInfinite($event,6)">
                    <ion-infinite-scroll-content></ion-infinite-scroll-content>
                </ion-infinite-scroll>
                
            </div>
        </ion-list>
        
        <ion-list *ngSwitchCase="'user'">
            <div class="scroll-bar">
                <div class="scroll-bar-content">
                    <span (click)="tabSelect('queries',1)" [class.active]="userTab==='queries'" style="padding-left:1.5rem;">{{ 'Messages.Queries' | translate }}</span>
                    <span (click)="tabSelect('pendbook',2)" [class.active]="userTab==='pendbook'">{{ 'Messages.Pend' | translate }}</span>
                    <span (click)="tabSelect('accebook',3)" [class.active]="userTab==='accebook'">{{ 'Messages.Acce' | translate }}</span>
                    <span (click)="tabSelect('payment',4)" [class.active]="userTab==='payment'">{{ 'Messages.Pay' | translate }}</span>
                    <span (click)="tabSelect('completed',5)"  [class.active]="userTab==='completed'" style="padding-right: 1.5rem;">{{ 'Messages.Com' | translate }}</span>
                </div>
            </div>
            <div class="user-content">
                <div class="user-cell queries" *ngIf="userTab==='queries'">
                    <div>
                        <div class="user-cell-grid" *ngFor="let item of list.queries">
                            <div class="left" *ngIf="check_sign.queries">
                                <ion-checkbox  (ionChange)="updateCucumber(1,item.id)"></ion-checkbox>
                            </div>
                            <div style="width:100%">
                                <div class="house">
                                    <h3>Serial number: {{item.addtime}}</h3>
                                    <p class="times">Received time: {{ _getDate(item.addtime) }} 
                                        <b>{{item.to_is_read==1 ? 'Unread' : 'Read'}}</b>
                                    </p>
                                    <div class="house_content" *ngIf="item.info.cate!=4" (click)="goDetail(item)">
                                        <div class="house_img" [style.background-image]="'url('+src+item.info.logo+')'"></div>
                                        <div class="house_info">
                                            <p><i class="iconfont icon-map_map"></i><font>{{item.info.address}}</font></p>
                                            <p> 
                                                <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{item.info.living}}</font> </label>
                                                <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{item.info.bedroom}}</font> </label>
                                                <label for=""> <i class="iconfont icon-bad"></i><font>{{item.info.bathroom}}</font> </label>
                                                <label for=""> <font>{{item.info.area}}{{_aunit(item.info.area_unit)}}{{_otherArea(item.info.area,item.info.area_unit)}}</font> </label>
                                            </p>
                                            <p>
                                                <font>{{_cate(item.info.cate)}}</font>
                                                <span *ngIf="item.info.cate==1||item.info.cate==3">{{_unit(item.info.price_unit)}} {{item.info.price}}/{{_type(item.info.price_type)}}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="service_content" *ngIf="item.info.cate==4" (click)="goDetail(item)">
                                        <div class="service_img" [style.background-image]="'url('+src+item.info.avatar+')'"></div>
                                        <div class="service_info">
                                            <h5>{{item.info.title.replace('|',' ')}}</h5>
                                            <p><font class="price">{{item.price}}</font>{{_unit(price_unit)}}  </p>
                                            <p>
                                                <span class="stars">
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=1" [class.icon-star1]="item.info.star<1"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=2" [class.icon-star1]="item.info.star<2"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=3" [class.icon-star1]="item.info.star<3"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=4" [class.icon-star1]="item.info.star<4"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=5" [class.icon-star1]="item.info.star<5"></i>
                                                </span> 
                                                {{item.info.num}} reviews 
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="house-more">
                                    <div class="connect">
                                        <span >
                                            <i class="iconfont icon-notice_emil"></i>{{item.info.owner_email}}
                                        </span>
                                        <span >
                                            <i class="iconfont icon-notice_phone"></i>{{item.info.owner_tel}}
                                        </span>
                                    </div>
                                    <p>{{ item.message }}</p>                            
                                </div>
                            </div>
                        </div>
                        <ion-infinite-scroll (ionInfinite)="doInfinite($event,1)">
                            <ion-infinite-scroll-content></ion-infinite-scroll-content>
                        </ion-infinite-scroll>
                        <div class="img-container">
                            <img src="./assets/imgs/banner.png" alt="">
                        </div>
                    </div>
                    <div class="footer-btns">
                        <label class="input-radio" for="one">
                            <input id="one" type="checkbox" value="1" [(ngModel)]="check_sign.queries">
                            <span><b></b></span>
                            {{ 'Messages.select' | translate }}
                        </label>
                        <span class="del" (click)="delCucumber(1)"> {{ 'Messages.del' | translate }}</span>
                    </div>
                </div>
                <div class="user-cell pendbook" *ngIf="userTab==='pendbook'">
                    <div>
                    <div class="user-cell-grid" *ngFor="let item of list.pendbook;let i = index;" >
                        <div class="left" *ngIf="check_sign.pendbook">
                            <ion-checkbox  (checked)="updateCucumber(2,item.id)"></ion-checkbox>
                        </div>
                        <div *ngIf="item.type==2" style="width:100%">
                            <div class="house">
                                <p class="times">Received time: {{ _getDate(item.addtime) }} 
                                    <b *ngIf='item.handled==1 && item.info.cate!=4'>Viewing request</b>
                                    <b *ngIf='item.handled==1 && item.info.cate==4'>Service request</b>
                                    <b *ngIf='item.deposit_status==2'>Refund request</b>
                                    <b *ngIf='item.house_status==2'>Move out</b>
                                </p>
                                <div class="house_content" *ngIf="item.info.cate!=4" (click)="goDetail(item)">
                                    <div class="house_img" [style.background-image]="'url('+src+item.info.logo+')'"></div>
                                    <div class="house_info">
                                        <p><i class="iconfont icon-map_map"></i><font>{{item.info.address}}</font></p>
                                        <p> 
                                            <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{item.info.living}}</font> </label>
                                            <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{item.info.bedroom}}</font> </label>
                                            <label for=""> <i class="iconfont icon-bad"></i><font>{{item.info.bathroom}}</font> </label>
                                            <label for=""> <font>{{item.info.area}}{{_aunit(item.info.area_unit)}}{{_otherArea(item.info.area,item.info.area_unit)}}</font> </label>
                                        </p>
                                        <p>
                                            <font>{{_cate(item.info.cate)}}</font>
                                            <span *ngIf="item.info.cate==1||item.info.cate==3">{{_unit(item.info.price_unit)}} {{item.info.price}}/{{_type(item.info.price_type)}}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="service_content" *ngIf="item.info.cate==4" (click)="goDetail(item)">
                                    <div class="service_img" [style.background-image]="'url('+src+item.info.avatar+')'"></div>
                                    <div class="service_info">
                                        <h5>{{item.info.title.replace('|',' ')}}</h5>
                                        <p><font class="price">{{item.price}}</font>{{_unit(price_unit)}}  </p>
                                        <p>
                                            <span class="stars">
                                                <i class="iconfont" [class.icon-star]="item.info.star>=1" [class.icon-star1]="item.info.star<1"></i>
                                                <i class="iconfont" [class.icon-star]="item.info.star>=2" [class.icon-star1]="item.info.star<2"></i>
                                                <i class="iconfont" [class.icon-star]="item.info.star>=3" [class.icon-star1]="item.info.star<3"></i>
                                                <i class="iconfont" [class.icon-star]="item.info.star>=4" [class.icon-star1]="item.info.star<4"></i>
                                                <i class="iconfont" [class.icon-star]="item.info.star>=5" [class.icon-star1]="item.info.star<5"></i>
                                            </span> 
                                            {{item.info.num}} reviews 
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="house-more">
                                <div class="connect">
                                    <span >
                                        <i class="iconfont icon-notice_emil"></i>{{item.info.owner_email}}
                                    </span>
                                    <span >
                                        <i class="iconfont icon-notice_phone"></i>{{item.info.owner_tel}}
                                    </span>
                                </div>
                                <p>{{ item.message }}</p>                            
                            </div>
                            <div class="house-btn" *ngIf="item.handled==1">
                                <div class="btn-group">
                                    <button ion-button (click)="view(item.id,-1,i,this.list.pendbook)">Reject</button>
                                    <button ion-button (click)="view(item.id,2,i,this.list.pendbook)">Approved</button>
                                    <button ion-button *ngIf="item.bg_status==2&&item.info.cate!=4" (click)="tenant(item.id,2,i,this.list.pendbook)">Tenant check</button>
                                </div>
                            </div>
                            <div class="house-btn" *ngIf="item.house_status==2">
                                <div class="btn-group">
                                    <button ion-button (click)="refund(item.id,-1,i,this.list.pendbook)">Reject</button>
                                    <button ion-button (click)="refund(item.id,3,i,this.list.pendbook)">Approved</button>
                                </div>
                            </div>
                            <div class="house-btn" *ngIf="item.deposit_status==2">
                                <div class="btn-group">
                                    <button ion-button (click)="refoud_deposit(item.id,-2,i,this.list.pendbook)">Reject</button>
                                    <button ion-button (click)="refoud_deposit(item.id,3,i,this.list.pendbook)">Approved</button>
                                </div>
                            </div>
                        </div>
                        <div *ngIf="item.type==1" style="width:100%">
                            <div class="house">
                                <h3>Serial number: {{item.cart}}</h3>
                                <p class="times">
                                    Received time: {{ _getDate(item.addtime) }} 
                                    <b *ngIf='item.handled==1 && item.info.cate!=4'>Viewing request</b>
                                    <b *ngIf='item.handled==1 && item.info.cate==4'>Service request</b>
                                    <b *ngIf='item.deposit_status==2'>Refund request</b>
                                    <b *ngIf='item.house_status==2'>Move out</b>
                                    <b *ngIf='item.handled==1&&item.info.bg_status==2'>Tenant check request</b>
                                </p>
                                <div class="house_content" *ngIf="item.info.cate!=4" (click)="goDetail(item)">
                                    <div class="house_img" [style.background-image]="'url('+src+item.info.logo+')'"></div>
                                    <div class="house_info">
                                        <p><i class="iconfont icon-map_map"></i><font>{{item.info.address}}</font></p>
                                        <p> 
                                            <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{item.info.living}}</font> </label>
                                            <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{item.info.bedroom}}</font> </label>
                                            <label for=""> <i class="iconfont icon-bad"></i><font>{{item.info.bathroom}}</font> </label>
                                            <label for=""> <font>{{item.info.area}}{{_aunit(item.info.area_unit)}}{{_otherArea(item.info.area,item.info.area_unit)}}</font> </label>
                                        </p>
                                        <p>
                                            <font>{{_cate(item.info.cate)}}</font>
                                            <span *ngIf="item.info.cate==1||item.info.cate==3">{{_unit(item.info.price_unit)}} {{item.info.price}}/{{_type(item.info.price_type)}}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="service_content" *ngIf="item.info.cate==4" (click)="goDetail(item)">
                                    <div class="service_img" [style.background-image]="'url('+src+item.info.avatar+')'"></div>
                                    <div class="service_info">
                                        <h5>{{item.info.title.replace('|',' ')}}</h5>
                                        <p><font class="price">{{item.price}}</font>{{_unit(price_unit)}}  </p>
                                        <p>
                                            <span class="stars">
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=1" [class.icon-star1]="item.info.star<1"></i>
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=2" [class.icon-star1]="item.info.star<2"></i>
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=3" [class.icon-star1]="item.info.star<3"></i>
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=4" [class.icon-star1]="item.info.star<4"></i>
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=5" [class.icon-star1]="item.info.star<5"></i>
                                            </span> 
                                            {{item.info.num}} reviews 
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="house-more">
                                <div class="connect">
                                    <span >
                                        <i class="iconfont icon-notice_emil"></i>{{item.info.owner_email}}
                                    </span>
                                    <span >
                                        <i class="iconfont icon-notice_phone"></i>{{item.info.owner_tel}}
                                    </span>
                                </div>
                                <p>{{ item.message }}</p>                            
                            </div>
                        </div>
                    </div>
                    <ion-infinite-scroll (ionInfinite)="doInfinite($event,2)">
                        <ion-infinite-scroll-content></ion-infinite-scroll-content>
                    </ion-infinite-scroll>
                    <div class="img-container">
                        <img src="./assets/imgs/banner.png" alt="">
                    </div>
                    </div>
                    <div class="footer-btns">
                            <label class="input-radio" for="two">
                                <input id="two" type="checkbox" value="1" [(ngModel)]="check_sign.pendbook">
                                <span><b></b></span>
                                {{ 'Messages.select' | translate }}
                            </label>
                            <!-- <span class="del">{{ 'Messages.del' | translate }}</span> -->
                        </div>
                </div>
                <div class="user-cell accebook" *ngIf="userTab==='accebook'">
                    <div>
                        <div class="user-cell-grid" *ngFor="let item of list.accebook">
                            <div class="left" *ngIf="check_sign.accebook">
                                <ion-checkbox  (checked)="updateCucumber(3,item.id)"></ion-checkbox>
                            </div>
                            <div *ngIf="item.type==1" style="width:100%">
                                <div class="house">
                                    <h3>Serial number: {{item.cart}}</h3>
                                    <!-- <p class="times" *ngIf="item.house_status==3">Move out time: {{ _getDate(item.endtime) }} <b >Accepted move out</b></p> -->
                                    <p class="times" *ngIf="item.house_status==3">Move out time: {{ _getDate(item.endtime) }} <b >Accepted move out</b></p>
                                    <p class="times" *ngIf="item.deposit_status==3 && item.house_status!=3">refound time: {{ _getDate(item.viewtime) }} <b >Accepted refound deposit</b></p>
                                    <p class="times" *ngIf="item.bg_status==3 && item.handled==1">Tenant check time: {{ _getDate(item.viewtime) }} <b >Accepted tenant check</b></p>
                                    <p class="times" *ngIf="item.handled==2">Accpted view time: {{ _getDate(item.viewtime) }} <b >Accepted viewing</b></p>
                                    <div class="house_content" *ngIf="item.info.cate!=4" (click)="goDetail(item)">
                                        <div class="house_img" [style.background-image]="'url('+src+item.info.logo+')'"></div>
                                        <div class="house_info">
                                            <p><i class="iconfont icon-map_map"></i><font>{{item.info.address}}</font></p>
                                            <p> 
                                                <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{item.info.living}}</font> </label>
                                                <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{item.info.bedroom}}</font> </label>
                                                <label for=""> <i class="iconfont icon-bad"></i><font>{{item.info.bathroom}}</font> </label>
                                                <label for=""> <font>{{item.info.area}}{{_aunit(item.info.area_unit)}}{{_otherArea(item.info.area,item.info.area_unit)}}</font> </label>
                                            </p>
                                            <p>
                                                <font>{{_cate(item.info.cate)}}</font>
                                                <span *ngIf="item.info.cate==1||item.info.cate==3">{{_unit(item.info.price_unit)}} {{item.info.price}}/{{_type(item.info.price_type)}}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="service_content" *ngIf="item.info.cate==4" (click)="goDetail(item)">
                                        <div class="service_img" [style.background-image]="'url('+src+item.info.avatar+')'"></div>
                                        <div class="service_info">
                                            <h5>{{item.info.title.replace('|',' ')}}</h5>
                                            <p><font class="price">{{item.price}}</font>{{_unit(price_unit)}}  </p>
                                            <p>
                                                <span class="stars">
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=1" [class.icon-star1]="item.info.star<1"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=2" [class.icon-star1]="item.info.star<2"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=3" [class.icon-star1]="item.info.star<3"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=4" [class.icon-star1]="item.info.star<4"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=5" [class.icon-star1]="item.info.star<5"></i>
                                                </span> 
                                                {{item.info.num}} reviews 
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="house-more">
                                    <div class="connect">
                                        <span >
                                            <i class="iconfont icon-notice_emil"></i>{{item.info.owner_email}}
                                        </span>
                                        <span >
                                            <i class="iconfont icon-notice_phone"></i>{{item.info.owner_tel}}
                                        </span>
                                    </div>
                                    <p>{{ item.message }}</p>                            
                                </div> 
                                <div class="house-btn" *ngIf="item.handled==2">
                                    <div class="btn-group">
                                        <button ion-button (click)="goReview(item)">Review</button>
                                        <button ion-button (click)="gopay(payPage,item)">Pay</button>
                                    </div>
                                </div>
                                <!-- <div class="house-btn">
                                    <div class="btn-group">
                                        <button ion-button (click)="goto(reviewPage,item.id)">Review</button>
                                        <button ion-button >Pay</button>
                                    </div>
                                </div> -->
                            </div>
                            <div *ngIf="item.type==2" style="width:100%">
                                    <div class="house">
                                        <h3>Serial number: {{item.cart}}</h3>
                                        <!-- <p class="times">Move out time: {{ _getDate(item.endtime) }} <b >Accepted move out</b></p> -->
                                        <p class="times" *ngIf="item.house_status==3">Move out time: {{ _getDate(item.endtime) }} <b >Accepted move out</b></p>
                                        <p class="times" *ngIf="item.deposit_status==3&&item.house_status!=3">refound time: {{ _getDate(item.viewtime) }} <b >Accepted refound deposit</b></p>
                                        <p class="times" *ngIf="item.bg_status==3&&item.handled==1">Tenant check time: {{ _getDate(item.viewtime) }} <b >Accepted tenant check</b></p>
                                        <div class="house_content" *ngIf="item.info.cate!=4" (click)="goDetail(item)">
                                            <div class="house_img" [style.background-image]="'url('+src+item.info.logo+')'"></div>
                                            <div class="house_info">
                                                <p><i class="iconfont icon-map_map"></i><font>{{item.info.address}}</font></p>
                                                <p> 
                                                    <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{item.info.living}}</font> </label>
                                                    <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{item.info.bedroom}}</font> </label>
                                                    <label for=""> <i class="iconfont icon-bad"></i><font>{{item.info.bathroom}}</font> </label>
                                                    <label for=""> <font>{{item.info.area}}{{_aunit(item.info.area_unit)}}{{_otherArea(item.info.area,item.info.area_unit)}}</font> </label>
                                                </p>
                                                <p>
                                                    <font>{{_cate(item.info.cate)}}</font>
                                                    <span *ngIf="item.info.cate==1||item.info.cate==3">{{_unit(item.info.price_unit)}} {{item.info.price}}/{{_type(item.info.price_type)}}</span>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="service_content" *ngIf="item.info.cate==4" (click)="goDetail(item)">
                                            <div class="service_img" [style.background-image]="'url('+src+item.info.avatar+')'"></div>
                                            <div class="service_info">
                                                <h5>{{item.info.title.replace('|',' ')}}</h5>
                                                <p><font class="price">{{item.price}}</font>{{_unit(price_unit)}}  </p>
                                                <p>
                                                    <span class="stars">
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=1" [class.icon-star1]="item.info.star<1"></i>
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=2" [class.icon-star1]="item.info.star<2"></i>
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=3" [class.icon-star1]="item.info.star<3"></i>
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=4" [class.icon-star1]="item.info.star<4"></i>
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=5" [class.icon-star1]="item.info.star<5"></i>
                                                    </span> 
                                                    {{item.info.num}} reviews 
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="house-more">
                                        <div class="connect">
                                            <span >
                                                <i class="iconfont icon-notice_emil"></i>{{item.info.owner_email}}
                                            </span>
                                            <span >
                                                <i class="iconfont icon-notice_phone"></i>{{item.info.owner_tel}}
                                            </span>
                                        </div>
                                        <p>{{ item.message }}</p>                            
                                    </div>
                                    <div class="house-btn" *ngIf="item.bg_status==3&&item.handled==1">
                                        <div class="btn-group">
                                            <button ion-button (click)="goto(checkPage,item.id)">View</button>
                                        </div>
                                    </div>
                                    <!-- <div class="house-btn" >
                                        <div class="btn-group">
                                            <button ion-button (click)="goto(checkPage,item.id)">View</button>
                                        </div>
                                    </div> -->
                                </div>
                        </div>
                        <ion-infinite-scroll (ionInfinite)="doInfinite($event,3)">
                            <ion-infinite-scroll-content></ion-infinite-scroll-content>
                        </ion-infinite-scroll>
                        <div class="img-container">
                            <img src="./assets/imgs/banner.png" alt="">
                        </div>
                    </div>
                    <div class="footer-btns">
                        <label class="input-radio" for="three">
                            <input id="three" type="checkbox" value="1" [(ngModel)]="check_sign.accebook">
                            <span><b></b></span>
                            {{ 'Messages.select' | translate }}
                        </label>
                        <!-- <span class="del">{{ 'Messages.del' | translate }}</span> -->
                    </div>
                </div>
                <div class="user-cell payment" *ngIf="userTab==='payment'">
                    <div>
                        <div class="user-cell-grid" *ngFor="let item of list.payment">
                            <div class="left" *ngIf="check_sign.payment">
                                <ion-checkbox  (checked)="updateCucumber(4,item.id)"></ion-checkbox>
                            </div>
                            <div *ngIf="item.type==1" style="width:100%">
                                <div class="house">
                                    <h3>Serial number: {{item.cart}}</h3>
                                    <p class="times">Received time: {{ _getDate(item.addtime) }} <b >Approved</b></p>
                                    <div class="house_content" *ngIf="item.info.cate!=4" (click)="goDetail(item)">
                                        <div class="house_img" [style.background-image]="'url('+src+item.info.logo+')'"></div>
                                        <div class="house_info">
                                            <p><i class="iconfont icon-map_map"></i><font>{{item.info.address}}</font></p>
                                            <p> 
                                                <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{item.info.living}}</font> </label>
                                                <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{item.info.bedroom}}</font> </label>
                                                <label for=""> <i class="iconfont icon-bad"></i><font>{{item.info.bathroom}}</font> </label>
                                                <label for=""> <font>{{item.info.area}}{{_aunit(item.info.area_unit)}}{{_otherArea(item.info.area,item.info.area_unit)}}</font> </label>
                                            </p>
                                            <p>
                                                <font>{{_cate(item.info.cate)}}</font>
                                                <span *ngIf="item.info.cate==1||item.info.cate==3">{{_unit(item.info.price_unit)}} {{item.info.price}}/{{_type(item.info.price_type)}}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="service_content" *ngIf="item.info.cate==4" (click)="goDetail(item)">
                                        <div class="service_img" [style.background-image]="'url('+src+item.info.avatar+')'"></div>
                                        <div class="service_info">
                                            <h5>{{item.info.title.replace('|',' ')}}</h5>
                                            <p><font class="price">{{item.price}}</font>{{_unit(price_unit)}}  </p>
                                            <p>
                                                <span class="stars">
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=1" [class.icon-star1]="item.info.star<1"></i>
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=2" [class.icon-star1]="item.info.star<2"></i>
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=3" [class.icon-star1]="item.info.star<3"></i>
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=4" [class.icon-star1]="item.info.star<4"></i>
                                                    <i class="iconfont" [class.icon-star]="item.info.star>=5" [class.icon-star1]="item.info.star<5"></i>
                                                </span> 
                                                {{item.info.num}} reviews 
                                            </p>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="house-more">
                                    <div class="connect">
                                        <span >
                                            <i class="iconfont icon-notice_emil"></i>{{item.info.owner_email}}
                                        </span>
                                        <span >
                                            <i class="iconfont icon-notice_phone"></i>{{item.info.owner_tel}}
                                        </span>
                                    </div>
                                    <div class="pay_mount">
                                        Payment amount: <span>{{_unit(price_unit)}} {{item.price}}</span>
                                    </div>
                                </div>
                                <div class="house-btn" *ngIf="item.info.cate!=4">
                                    <div class="payment-button">
                                        <button ion-button (click)="moveout(item.id,-1,i,this.list.payment)">Move out</button>
                                        <button ion-button >Pay</button>
                                        <button ion-button (click)="refoud_deposit(item.id,-1,i,this.list.payment)">Deposit refund</button>
                                        <button ion-button (click)="refund(item.id,-1,i,this.list.payment)">Deposit protection</button>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="item.type==2" style="width:100%">
                                    <div class="house">
                                        <h3>Serial number: {{item.cart}}</h3>
                                        <p class="times">Received time: {{ _getDate(item.addtime) }} <b >Approved</b></p>
                                        <div class="house_content" *ngIf="item.info.cate!=4" (click)="goDetail(item)">
                                            <div class="house_img" [style.background-image]="'url('+src+item.info.logo+')'"></div>
                                            <div class="house_info">
                                                <p><i class="iconfont icon-map_map"></i><font>{{item.info.address}}</font></p>
                                                <p> 
                                                    <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{item.info.living}}</font> </label>
                                                    <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{item.info.bedroom}}</font> </label>
                                                    <label for=""> <i class="iconfont icon-bad"></i><font>{{item.info.bathroom}}</font> </label>
                                                    <label for=""> <font>{{item.info.area}}{{_aunit(item.info.area_unit)}}{{_otherArea(item.info.area,item.info.area_unit)}}</font> </label>
                                                </p>
                                                <p>
                                                    <font>{{_cate(item.info.cate)}}</font>
                                                    <span *ngIf="item.info.cate==1||item.info.cate==3">{{_unit(item.info.price_unit)}} {{item.info.price}}/{{_type(item.info.price_type)}}</span>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="service_content" *ngIf="item.info.cate==4" (click)="goDetail(item)">
                                            <div class="service_img" [style.background-image]="'url('+src+item.info.avatar+')'"></div>
                                            <div class="service_info">
                                                <h5>{{item.info.title.replace('|',' ')}}</h5>
                                                <p><font class="price">{{item.price}}</font>{{_unit(price_unit)}}  </p>
                                                <p>
                                                    <span class="stars">
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=1" [class.icon-star1]="item.info.star<1"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=2" [class.icon-star1]="item.info.star<2"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=3" [class.icon-star1]="item.info.star<3"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=4" [class.icon-star1]="item.info.star<4"></i>
                                                        <i class="iconfont" [class.icon-star]="item.info.star>=5" [class.icon-star1]="item.info.star<5"></i>
                                                    </span> 
                                                    {{item.info.num}} reviews 
                                                </p>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <div class="house-more">
                                        <div class="connect">
                                            <span >
                                                <i class="iconfont icon-notice_emil"></i>{{item.info.owner_email}}
                                            </span>
                                            <span >
                                                <i class="iconfont icon-notice_phone"></i>{{item.info.owner_tel}}
                                            </span>
                                        </div>
                                        <div class="pay_mount">
                                            Payment amount: <span>{{_unit(price_unit)}} {{item.price}}</span>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <ion-infinite-scroll (ionInfinite)="doInfinite($event,4)">
                            <ion-infinite-scroll-content></ion-infinite-scroll-content>
                        </ion-infinite-scroll>
                        <div class="img-container">
                            <img src="./assets/imgs/banner.png" alt="">
                        </div>
                    </div>
                    <div class="footer-btns">
                            <label class="input-radio" for="four">
                                <input id="four" type="checkbox" value="1" [(ngModel)]="check_sign.payment">
                                <span><b></b></span>
                                {{ 'Messages.select' | translate }}
                            </label>
                            <!-- <span class="del">{{ 'Messages.del' | translate }}</span> -->
                        </div>
                </div>
                <div class="user-cell payment" *ngIf="userTab==='completed'">
                    <div>
                        <div class="user-cell-grid" *ngFor="let item of list.completed">
                                <div class="left" *ngIf="check_sign.completed">
                                    <ion-checkbox (ionChange)="updateCucumber(5,item.id)"></ion-checkbox>
                                </div>
                                <div style="width:100%">
                                    <div class="house">
                                            <h3>Serial number: {{item.cart}}</h3>
                                            <p class="times" *ngIf="item.house_status==-2">Move out time: {{ _getDate(item.endtime) }} <b >Reject move out</b></p>
                                            <p class="times" *ngIf="item.deposit_status==-2">refound time: {{ _getDate(item.endtime) }} <b >Reject refound deposit</b></p>
                                            <p class="times" *ngIf="item.bg_status==-2">Tenant check time: {{ _getDate(item.endtime) }} <b >Reject tenant check</b></p>
                                            <div class="house_content" *ngIf="item.info.cate!=4" (click)="goDetail(item)">
                                                <div class="house_img" [style.background-image]="'url('+src+item.info.logo+')'"></div>
                                                <div class="house_info">
                                                    <p><i class="iconfont icon-map_map"></i><font>{{item.info.address}}</font></p>
                                                    <p> 
                                                        <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{item.info.living}}</font> </label>
                                                        <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{item.info.bedroom}}</font> </label>
                                                        <label for=""> <i class="iconfont icon-bad"></i><font>{{item.info.bathroom}}</font> </label>
                                                        <label for=""> <font>{{item.info.area}}{{_aunit(item.info.area_unit)}}{{_otherArea(item.info.area,item.info.area_unit)}}</font> </label>
                                                    </p>
                                                    <p>
                                                        <font>{{_cate(item.info.cate)}}</font>
                                                        <span *ngIf="item.info.cate==1||item.info.cate==3">{{_unit(item.info.price_unit)}} {{item.info.price}}/{{_type(item.info.price_type)}}</span>
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="service_content" *ngIf="item.info.cate==4" (click)="goDetail(item)">
                                                <div class="service_img" [style.background-image]="'url('+src+item.info.avatar+')'"></div>
                                                <div class="service_info">
                                                    <h5>{{item.info.title.replace('|',' ')}}</h5>
                                                    <p><font class="price">{{item.price}}</font>{{_unit(price_unit)}}  </p>
                                                    <p>
                                                        <span class="stars">
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=1" [class.icon-star1]="item.info.star<1"></i>
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=2" [class.icon-star1]="item.info.star<2"></i>
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=3" [class.icon-star1]="item.info.star<3"></i>
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=4" [class.icon-star1]="item.info.star<4"></i>
                                                            <i class="iconfont" [class.icon-star]="item.info.star>=5" [class.icon-star1]="item.info.star<5"></i>
                                                        </span> 
                                                        {{item.info.num}} reviews 
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                
                                
                                    <div class="house-more">
                                        <div class="connect">
                                                <span >
                                                    <i class="iconfont icon-notice_emil"></i>{{item.info.owner_email}}
                                                </span>
                                                <span >
                                                    <i class="iconfont icon-notice_phone"></i>{{item.info.owner_tel}}
                                                </span>
                                        </div>
                                        <p>{{ item.message }}</p>
                                    </div>
                                </div>
                                
                        </div>
                        <ion-infinite-scroll (ionInfinite)="doInfinite($event,5)">
                            <ion-infinite-scroll-content></ion-infinite-scroll-content>
                        </ion-infinite-scroll>
                        <div class="img-container">
                            <img src="./assets/imgs/banner.png" alt="">
                        </div>
                    </div>
                    <div class="footer-btns">
                            <label class="input-radio" for="five">
                                <input id="five" type="checkbox" value="1" [(ngModel)]="check_sign.completed">
                                <span><b></b></span>
                                {{ 'Messages.select' | translate }}
                            </label>
                            <span class="del" (click)="delCucumber(5)"> {{ 'Messages.del' | translate }}</span>
                        </div>
                </div>
            </div>
        </ion-list>
    </div>
</ion-content>